<template>
  <div>
    <!-- 
  在使用v-bind的时候,直接赋值一个对象,
  则v-bind会把对象的键值对依次拿出来,
  设置给当前的模板作为属性 
  -->
    <div v-bind="{ a: 1, b: 2 }">div</div>
    <!-- 上边的v-bind最终解析出来就是下边的格式 -->
    <div :a="1" :b="2">div</div>

    <!-- 批量传递props -->
    <My-Header v-bind="person" />
    <hr />
    <h2>这个count每次加2</h2>
    <My-Count :num="2" />
    <!-- 这里传的是字符串2,前面加上:就是js环境了,2才是数字 -->
    <hr />
    <h2>这个count每次加3</h2>
    <My-Count :num="3" />
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader";
import MyCount from "./components/MyCount";

export default {
  name: "App",

  // 现在我们希望把这个数据传给MyHeader组件
  //在MyHeader组件中我们用props分别接收person中的每一项
  data() {
    return {
      person: {
        name: "小瘪三",
        age: 26,
        sex: "男",
      },
    };
  },
  // 注册
  components: {
    MyHeader,
    MyCount,
  },
};
</script>

<style scoped>
</style>